<!--vedio组件-->
<template>
  <div class="component-video">
    <div :id="`video-${id}`" :style="`width:100%;height:100%;`"></div>
  </div>
</template>

<script>
// import 'dplayer/dist/DPlayer.min.css';
import DPlayer from "dplayer";
export default {
  props: {
    id: {
      type: [Number, String],
      default: 1,
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 150,
    },
    url: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      player: null,
      isPlaying: false,
    };
  },
  mounted() {
    this.initPlayer();
  },
  watch: {
    url(value) {
      this.player && this.player.switchVideo({ url: value });
    },
  },
  methods: {
    initPlayer() {
      if (this.player) return;
      this.player = new DPlayer({
        container: document.getElementById(`video-${this.id}`),
        video: {
          url: this.url,
          type: "hls",
        },
        // 多视频是否互斥
        mutex: false,
      });
    },
  },
};
</script>

<style>
.component-video {
  position: relative;
  width: 100%;
}

.component-video-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.component-video-icon {
  text-align: center;
}

.component-video-title {
  text-align: center;
  font-size: 22px;
  color: #4580ff;
}

.component-video-subtitle {
  text-align: center;
  font-size: 16px;
  color: #888;
}
</style>
